<template>
    <SwipeNavBar :tabBars="tabBars" :width="33" :currentIndex="currentIndex" :swiperList="swiperList"
        @changeIndex="handleChange" @changeTab="handleChange" :scrollH="scrollH">
        <template v-for="(item, index) in 3" :key="index" v-slot:swiper-item="{ item, index }">
            <!-- 这里是具体的内容 -->
            <Empty v-if="folderList.length === 0"></Empty>
            <StarFolders :folderList="folderList" :type="index" @open="open"></StarFolders>
        </template>
    </SwipeNavBar>
    <uni-popup ref="popup" background-color="#fff" type="bottom">
        <view class="item" @tap="removeFolder">
            <text class="iconfont icon-qingkonglishijilu"></text>
            <text class="text">删除此收藏夹</text>
        </view>
        <view class="item" @tap="editFolder">
            <text class="iconfont icon-icon_shiting-shuodianshimo"></text>
            <text class="text">编辑收藏夹</text>
        </view>
    </uni-popup>
    <!-- 编辑收藏夹 -->
    <uni-popup ref="updateFolderPop" :mask-click="false">
        <view class="updateFolderPop-container">
            <view class="title">新建收藏夹</view>
            <input class="folderName" type="text" placeholder="请输入新收藏夹名称" :adjust-position="false" v-model="folderName">
            <view class="footer">
                <view @tap="hide" class="cancel">取消</view>
                <view @tap="updateFolder" class="confirm">确定</view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import Empty from '@/components/Empty.vue';
import { ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import SwipeNavBar from '@/components/SwipeNavBar.vue';
import StarFolders from '../components/StarFolders.vue';
import { API_getFolder, API_removeCollection } from '@/service/favorite';
import type { Folder } from '@/type/favorite';
import { API_getCollection, API_removeFolder, API_updateFolderName } from '@/service/favorite';
const currentFolder = ref<Folder>();
const folderList = ref<Folder[]>([]);
//navigator传进来的参数
let params = ref<number>(0);
let scrollH = 0;
const tabBars =
    [
        { id: 1, name: '帖子' },
        { id: 2, name: '八股' },
        { id: 3, name: '题目' }
    ]
const swiperList = [1, 1, 1];
let currentIndex = ref<number>(-1);

const handleChange = async (index: number) => {
    currentIndex.value = index;
    const res = await API_getFolder(currentIndex.value);
    folderList.value = res.data;
}
onLoad((options) => {
    params.value = options?.current;
    uni.getSystemInfo({
        success: (e) => {
            scrollH = e.windowHeight - uni.upx2px(100);
        }
    })
    currentIndex.value = Number(params.value);
})
onShow(() => {
    handleChange(currentIndex.value);
})
const folderName = ref<string>("");
const popup = ref<any>();
//删除此收藏夹
const removeFolder = () => {
    uni.showModal({
        content: '收藏夹中内容将清空，确认删除吗?',
        success: async function (res) {
            if (res.confirm) {
                let res = await API_removeFolder(currentFolder.value!.id);
                if (res.code == 1) {
                    uni.showToast({ icon: 'none', title: '删除成功' });
                    setTimeout(() => {
                        popup.value.close();
                        handleChange(currentIndex.value);
                    }, 500);
                } else uni.showToast({ icon: 'none', title: '操作失败' })
            }
        }
    });
}
//打开弹出层
const open = (item: Folder) => {
    popup.value.open();
    currentFolder.value = item;
}
const updateFolderPop = ref<any>();
//打开编辑收藏弹窗
const editFolder = () => {
    updateFolderPop.value.open();
}
//关闭编辑收藏弹窗
const hide = () => {
    updateFolderPop.value.close();
}
//更新收藏夹名称
const updateFolder = async () => {
    for (let i = 0; i < folderList.value.length; i++) {
        if (folderList.value[i].collectionName == folderName.value) {
            uni.showToast({
                title: '新收藏夹名称重复',
                icon: 'none',
                mask: true
            })
            folderName.value = "";

            return;
        }
    }
    const res = await API_updateFolderName(currentFolder.value!.id, folderName.value);
    if (res.code === 1) {
        hide();
        popup.value.close();
        handleChange(currentIndex.value);
        uni.showToast({
            title: '更新成功',
            icon: 'success',
            mask: true
        })
    } else {
        hide();
        popup.value.close();
        uni.showToast({
            title: '更新失败',
            icon: 'success',
            mask: true
        })
    }
    folderName.value = "";
}

</script>

<style scoped lang="scss">
.item {
    padding: 50rpx;
    display: flex;
    align-items: center;

    .icon-qingkonglishijilu {
        color: rgb(166, 18, 18);
        margin-right: 30rpx;
    }

    .icon-icon_shiting-shuodianshimo {
        color: $color-main;
        margin-right: 30rpx;
    }

    .text {
        color: $color-title;
        font-size: 30rpx;
    }
}

.updateFolderPop-container {
    position: fixed;
    width: 500rpx;
    left: calc(50vw - 250rpx);
    bottom: calc(50vh);
    border: 1rpx solid #ddd;
    background: #fff;
    border-radius: 10rpx;
    font-size: 30rpx;

    .title {
        padding-top: 30rpx;
        text-align: center;
        font-weight: 700;
    }

    .folderName {
        margin: 30rpx;
        padding: 10rpx;
        border: 1rpx solid #ddd;
        border-radius: 20rpx;
    }

    .footer {
        display: flex;
        // justify-content: space-around;
        // align-items: center;
        border-top: 1rpx solid #ddd;


        .cancel {
            padding: 20rpx 0;
            flex: 1;
            text-align: center;
        }

        .confirm {
            padding: 20rpx 0;
            flex: 1;
            text-align: center;
            border-left: 1rpx solid #ddd;
            color: $color-main;
        }

    }
}
</style>
